<template>
  <el-row>
    <el-col :span="6">
      <!--   第一步  只显示 下一步  0-->
      <!--   第二步  只显示 上一步 下一步 1-->
      <!--   第三步  只显示 上一步 完成 2-->
      <el-button
        v-if="progress.active >= 1 && progress.active <= 2"
        @click="$emit('setProgressActive', progress.active - 1)"
      >
        上一步
      </el-button>
      <el-button
        v-if="progress.active <= 1"
        @click="$emit('setProgressActive', progress.active + 1)"
        >下一步</el-button
      >
      <el-button
        v-if="progress.active === 2"
        @click="$emit('setProgressActive', 3)"
        >完成</el-button
      >
    </el-col>
    <el-col :span="6" :offset="12" v-if="progress.active !== 3">
      <el-button type="danger" @click="clear" v-show="progress.active === 0"
        >清空</el-button
      >
      <el-button type="primary" @click="save">保存</el-button>
    </el-col>
  </el-row>
</template>

<script>
import http from "@/utils/request";
import { AxiosError } from "axios";

export default {
  props: ["progress", "formData", "saveData"],
  name: "HandlerCom",
  methods: {
    // 保存按钮
    save() {
      // 获取第一步表单组件
      const setpOneForm = this.$parent.$refs.setpOne.$refs.setpOneForm;
      // 如果有保存过的商品就更新商品
      if (this.saveData) return this.updateProduct(setpOneForm);
      // 创建商品
      this.createProduct(setpOneForm);
    },
    // 创建商品
    createProduct(formCom) {
      formCom
        .validate()
        .then(() => {
          // 验证通过 创建商品
          return http.post("/product/", { ...this.formData });
        })
        .then((res) => {
          if (res.status !== 201) throw new Error("创建失败");
          // 保存数据
          this.$emit("update:saveData", res.data);
        })
        .then(() => {
          // 允许下一步
          this.$emit("setProgressIsActive", true);
          // 成功提示
          this.$message.success("创建成功");
        })
        .catch((err) => {
          // 如果时请求出错
          if (err instanceof AxiosError) return this.$message.error("保存失败");
          // 不允许下一步
          this.$emit("setProgressIsActive", false);
          // 验证未通过
          this.$message.info("请填写符合要求的内容");
        });
    },
    // 更新商品
    updateProduct(formCom) {
      formCom
        .validate()
        .then(() => {
          // 验证通过 更新商品
          return http.put(`/product/${this.saveData.id}/`, {
            ...this.formData,
          });
        })
        .then((res) => {
          if (res.status !== 200) throw new Error("更新失败");
          // 更新原来保存的数据
          this.$emit("update:saveData", res.data);
        })
        .then(() => {
          // 成功提示
          this.$message.success("更新成功");
        })
        .catch((err) => {
          // 如果时请求出错
          if (err instanceof AxiosError) return this.$message.error("更新失败");
          // 验证未通过
          this.$message.info("请填写符合要求的内容");
        });
    },
    // 清空按钮
    clear() {
      // 获取第一步表单组件
      const setpOneForm = this.$parent.$refs.setpOne.$refs.setpOneForm;
      // 重置表单
      setpOneForm.resetFields();
      // 清空保存的数据
      this.$emit("update:saveData", null);
      // 清空富文本编辑框内容
      this.$emit("clearEditedContent");
      // 如果在第一不什么都不执行
      if (this.progress.active === 0) return;
      // 回到第一步
      this.$emit("setProgressActive", 0);
      // 不能修改步数
      this.$emit("setProgressIsActive", false);
    },
  },
};
</script>

<style scoped></style>
